<template>
    <div>

        <div style="margin: 10px 0">
            <el-input style="width: 250px" placeholder="农物名称" suffix-icon="el-icon-search" class="ml-5" v-model="agricultureName"></el-input>
            <el-input style="width: 250px" placeholder="产出地" suffix-icon="el-icon-edit" class="ml-5" v-model="productionAddress"></el-input>
            <el-input style="width: 250px" placeholder="商家电话" suffix-icon="el-icon-message" class="ml-5" v-model="iphone"></el-input>
            <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
            <el-button class="ml-5" type="warning" @click="reset">重置</el-button>
        </div>

        <div style="margin: 10px 0">
            <el-button type="primary" @click="handleAdd">新增</el-button>
            <el-popconfirm
                    class="ml-5"
                    confirm-button-text='确定'
                    cancel-button-text='取消'
                    icon="el-icon-info"
                    icon-color="red"
                    title="确定删除吗？"
                    @confirm="delBatch"
            >
                <el-button type="danger"  slot="reference" >批量删除</el-button>
            </el-popconfirm>
            <!-- <el-upload
                     action="https://localhost/house/import"
                     :show-file-list=false
                     :accept="'xlsx'"
                     :on-success="importSuccess"
                     style="display: inline-block"
             >
                 <el-button type="primary" class="ml-5"  >导入</el-button>
             </el-upload>-->

            <!--<el-button type="primary" @click="exp" class="ml-5">导出Excel模板</el-button>-->
        </div>

        <el-table :data="tableData" border stripe :header-row-class-name="headerBg" @selection-change="handleSelectionChange">  //border stripe把表格变成斑马线风格
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="ID" width="70"></el-table-column>
            <el-table-column prop="agricultureName" label="农物名称" width="120"></el-table-column>
            <el-table-column prop="number" label="数量" width="120"></el-table-column>
            <el-table-column prop="productionAddress" label="产出地"></el-table-column>
            <el-table-column prop="price" label="单价"></el-table-column>
            <el-table-column prop="uploadBy" label="上架商家" width="80"></el-table-column>
            <el-table-column prop="variety" label="归属品种" width="100"></el-table-column>
            <el-table-column prop="iphone" label="商家联系电话" width="250"></el-table-column>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <!--<el-button type="success" @click="handleEdit(scope.row)">编辑</el-button>-->
                    <el-popconfirm
                            class="ml-5"
                            confirm-button-text='确定'
                            cancel-button-text='取消'
                            icon="el-icon-info"
                            icon-color="red"
                            title="确定删除吗？"
                            @confirm="del(scope.row.houseId)"
                    >
                        <el-button type="danger" slot="reference">删除</el-button>
                    </el-popconfirm>

                    <el-button  type="warning" @click="details(scope.row)">查看详情</el-button>
                    <el-dialog
                            title="提示"
                            :visible.sync="dialogVisible"
                            width="80%"
                            :before-close="handleClose"
                    >
                        <el-descriptions title="农物信息">
                            <el-descriptions-item label="ID">{{form.id}}</el-descriptions-item>
                            <el-descriptions-item label="农物名称">{{form.agricultureName}}</el-descriptions-item>
                            <el-descriptions-item label="数量">{{form.number}}</el-descriptions-item>
                            <el-descriptions-item label="产出地">{{form.productionAddress}}</el-descriptions-item>
                            <el-descriptions-item label="单格">{{form.price}}</el-descriptions-item>
                            <el-descriptions-item label="上架商家">{{form.uploadBy}}</el-descriptions-item>
                            <el-descriptions-item label="上架时间">{{form.uploadTime}}</el-descriptions-item>
                            <el-descriptions-item label="归属品种">{{form.variety}}</el-descriptions-item>
                            <el-descriptions-item label="商家联系电话">{{form.iphone}}</el-descriptions-item>
                        </el-descriptions>


                        <span slot="footer" class="dialog-footer">
                         <el-button @click="dialogVisible = false">取 消</el-button>
                         <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                         </span>
                    </el-dialog>

                </template>
            </el-table-column>
        </el-table>
        <div style="padding: 10px 0">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageSize"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

        <el-dialog title="果蔬信息" :visible.sync="dialogFormVisible" width="30%">
            <el-form :model="form" :rules="rules" label-width="80px" size="small">
                <el-form-item label="农物名称" prop="agricultureName"> <!-- 不加prop设置校验名则无法用此方法校验-->
                    <el-input v-model="form.agricultureName" @input="handleInputOpenValue($event)" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="数量" prop="number">
                    <el-input v-model="form.number" @input="handleInputOpenValue($event)" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="产出地">
                    <el-input v-model="form.productionAddress" @input="handleInputOpenValue($event)" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="价格" prop="price">
                    <el-input v-model="form.price" @input="handleInputOpenValue($event)" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="归属品种" prop="variety">
                    <el-select v-model="form.variety" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商家联系电话" prop="iphone">
                    <el-input v-model="form.iphone" @input="handleInputOpenValue($event)" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "Vegetable",
        data(){
            const checkPhone = (rule, value, callback) => {
                if (value) {
                    var reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
                    if (reg.test(value) === false) {
                        callback(new Error('只可输入英文数字和下划线'))
                    } else {
                        callback()
                    }
                } else {
                    callback()
                }
            }
            return{
                tableData: [],
                total: 0,
                pageNum: 1,   //点进来默认的页数和条数
                pageSize: 5,
                Id: "",
                agricultureName: "",
                productionAddress: "",
                iphone:"",
                form: {
                    Id: '',
                    agricultureName: '',
                    number:'',
                    productionAddress: '',
                    price: '',
                    uploadBy: '',
                    uploadTime:'',
                    variety:'',
                    iphone:''
                },
                rules: {
                    iphone: [
                        {required: true, message: '请输入正确手机号', validator: checkPhone},
                    ],
                    price: [
                        {pattern: /^[1-9]\d*(.\d{1,2})?$/, message: '请输正确价格', trigger: 'blur'},
                        {required: true, message: '请输入产品单价', trigger: 'blur'},
                    ],
                    agricultureName: [
                        {required: true, message: '请输入产品名称', trigger: 'blur'},
                        {min: 1, max: 15, message: '名称在1到15个中文之间', trigger: 'blur'}
                    ],
                    variety:[
                        {required: true, message: '请选择产品分类', trigger: 'blur'},
                    ],
                    number:[
                        {pattern: /^[1-9]\d*$/, message: '请输正确价格', trigger: 'blur'},
                        {required: true, message: '请输入上架数量', trigger: 'blur'}
                    ]
                },
                dialogFormVisible: false,
                multipleSelection: [],
                headerBg: "headerBg",
                dialogVisible: false,
                options: [{
                    value: '活禽肉蛋',
                    label: '活禽肉蛋'
                }, {
                    value: '果蔬五谷',
                    label: '果蔬五谷'
                },{
                    value: '海鲜干货',
                    label: '海鲜干货'
                }],

            }

        },
        created() {
            //请求分页查询数据
            this.load();
        },
        methods:{
            load(){     //封装请求分页查询方法，让其他地方调用
                this.request.get("/agriculture/list",{
                    params: {   //筛选条件
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                        Id: this.Id,
                        agricultureName: this.agricultureName,
                        productionAddress: this.productionAddress,
                        iphone: this.iphone,
                        variety: "果蔬五谷",
                        uploadBy:localStorage.getItem("userName")
                    }
                }).then(res =>{
                    console.log(res)
                    this.tableData=res.data.rows
                    this.total=res.data.total
                })

            },
            handleInputOpenValue(e) {
                this.$forceUpdate();
            },
            save(){
                this.form.uploadBy=localStorage.getItem("userName");
                if (this.form.id===''||this.form.id===undefined){
                    this.request.post("/agriculture/create",this.form).then(res => {
                        if (res){
                            console.log("cccc",res.data)
                            if (res.data=='fail'){
                                this.$message.warning("仓库无该农产品")
                                this.dialogFormVisible=false  //新增完关闭弹窗
                                this.load()
                            }else if (res.data=='less'){
                                this.$message.warning("上架数量超过仓库数量")
                                this.dialogFormVisible=false  //新增完关闭弹窗
                                this.load()
                            }else {
                                this.$message.success("新增成功")
                                this.dialogFormVisible=false  //新增完关闭弹窗
                                this.load()
                            }
                        }else {
                            this.$message.fail("新增失败")
                        }
                    })
                }else {
                    this.request.post("/agriculture/update",this.form).then(res => {
                        if (res){
                            this.$message.success("修改成功")
                            this.dialogFormVisible=false  //新增完关闭弹窗
                            this.load()
                        }else {
                            this.$message.fail("修改失败")
                        }
                    })
                }
            },
            handleAdd(){   //新增打开表单默认为空
                this.dialogFormVisible=true
                this.form= {}
            },
            handleEdit(row){   //编辑打开为form里面的数据
                console.log(row)
                this.form= row
                this.dialogFormVisible=true
            },
            del(id){
                this.request.post("/agriculture/delete",id).then(res=>{
                    if (res){
                        this.$message.success("删除成功")
                        this.load()
                    }else {
                        this.$message.fail("删除失败")
                    }
                })
            },
            delBatch(){
                let ids= this.multipleSelection.map(e=>e.id).join()
                this.request.post("/agriculture/delete",ids).then(res=>{
                    if (res){
                        this.$message.success("删除成功")
                        this.load()
                    }else {
                        this.$message.fail("删除失败")
                    }
                })
            },
            reset(){  //重置
                this.agricultureName=""
                this.productionAddress=""
                this.iphone=""
                this.load()
            },

            handleSelectionChange(val){

                this.multipleSelection=val
                console.log(val)
            },
            handleSizeChange(pageSize){     //点击触发分页跳转,pageSize是web点击后传过来的
                console.log(pageSize)
                this.pageSize=pageSize
                this.load()
            },
            handleCurrentChange(pageNum){
                console.log(pageNum)
                this.pageNum=pageNum
                this.load()
            },
            importSuccess(){
                this.$message.success("文件导入成功")
                this.load()
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            details(row){
                this.dialogVisible = true
                this.form = row
            },
            exp(){
                window.open("http://localhost:8081/house/excel")
            }
        }
    }
</script>

<style>
    .headerBg{
        background: #cccccc !important;
    }
</style>
